<template>
  <div id="app">
   <h2>你好，vue。{{msg}}</h2>
   
    <hr>
    这是一个根组件
    
    <hr>
    obj：{{obj.name}}
    
    <hr>
    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>

    <hr>
    <ul>
      <li v-for="item in list1">
        {{item.title}}
      </li>
    </ul>

    <hr>
    <ul>
      <li v-for="item in list2">
        {{item.title}}
        <ol>
          <li v-for="news in item.list">
            {{news.title}}
          </li>
        </ol>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: '你好vue',
      obj: {
        name: '张三'
      },
      list: ['张三','李四','王五'],
      list1: [
        {'title':'111'},
        {'title':'222'},
        {'title':'333'}
      ],
      list2: [
        {
          'title':'国内新闻',
          list:[
            {'title':'国内新闻211'},
            {'title':'国内新闻212'}
          ]
        },
        {
          'title':'国际新闻',
          list:[
            {'title':'国际新闻211'},
            {'title':'国际新闻212'}
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss">

</style>
